<template>
	<div class="body">
		<view class="rectangle">
			<div>
				<div class="title"> 提现金额 </div>
				<div class="money">
					<div class="num">
						<span style="position: relative; top: 3px">¥</span>
						<input v-model.number="amount" type="digit" placeholder="0.00" />
					</div>
					<div class="all" @click="all"> 全部提现 </div>
				</div>
			</div>
			<div>
			</div>
			<hr style="color:azure; width: 80%; margin-left: 40px;" />
			<div>
				<div class="hou2"> 可提现金额 ¥{{contAmount | formatDecimal}} </div>
			</div>
		</view>
		<view>
			<div>
				<div class="wai"> {{ config.Withdrawal }} </div>
			</div>
		</view>
		<div class="btn" @click="deposit" v-if="buttonShow">确认提现</div>
		   <uni-popup ref="popups" type="dialog">
		     <uni-popup-dialog mode="base" confirmText="去绑定" content="还未添加付款码，无法提现立即绑定付款码" :duration="2000"
                       :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		   </uni-popup>
		<view>
			<uni-popup ref="popup" type="center" background-color="rgba(0,0,0,0)">
				<div class="pop">
					<div class="text1">
						<img src="../../static/提交确认@3x.png">
						<div class="h1">
							提现申请已提交
						</div>
						<div class="h2">
							已实际到账金额为准
						</div>
					</div>
					<div class="btnsc" @click="gc">我知道了</div>
				</div>
			</uni-popup>
		</view>
	</div>
</template>

<script>
	import Api from "../../API/api";
	export default {
		data() {
			return {
				value: null,
				contAmount: 0,
				amount: null,
				windowHeight: "",
				buttonShow: true,
				config: {},
				qrPay:null
			}
		},
		filters: {
			formatDecimal(value) {
				// 将值转换为 Number 类型，然后使用 toFixed 方法将其格式化为带有两位小数的字符串
				return Number(value).toFixed(2);
			},
		},
		onShow() {
			Api.getwxuser().then(res => {
				console.log(res.data)
				this.contAmount = res.data.amount;
				this.qrPay = res.data.qrPay;
			})
			this.config = uni.getStorageSync("config");
			console.log(this.config)
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight;
				}
			});
			uni.onWindowResize((res) => {
				if (res.size.windowHeight < this.windowHeight) {
					this.buttonShow = false
				} else {
					this.buttonShow = true
				}
			})

		},
		methods: {
			formatDecimal() {
				this.amount = parseFloat(this.amount.toFixed(2));
			},
			//关闭弹出
			gc() {
				this.$refs.popup.close()
			},
			all() {
				this.amount = this.contAmount
			},
			// 提现
			deposit() {
				if(this.qrPay==null){
					this.$refs.popups.open()
					return
				}
				if (this.amount > 0 && this.amount <= this.contAmount) {
					//验证是 账号信息是否完整
					Api.getVerification().then(res => {
						//申请提现
						Api.withdrawals(this.amount).then(res => {
							this.contAmount = this.contAmount - this.amount
							console.log(res)
							this.$refs.popup.open()
						})
					}).catch(err => {
						
					})
				} else {
					alert("提现金额不正确")
				}

			},
			close() {
				this.$refs.popup.close()
				this.$refs.popups.close()
			},
			confirm() {
				uni.navigateTo({
					url: '/pages/index/upimg'
				})
				this.$refs.popups.close()
			}
		},
	}
</script>


<style lang="less" scoped>
	.pop {
		background-color: #FFFFFF;
		width: 650rpx;
		height: 700rpx;
		//margin-bottom: 200rpx;
		border-radius: 50rpx;

		img {
			width: 100%;
		}

		.text1 {
			text-align: center;

			.h1 {
				font-size: 40rpx;
				font-weight: bold;
				color: #000000;
				//margin-top: 100rpx;
			}

			.h2 {
				margin-top: 10rpx;
				font-size: 30rpx;
				color: #000000;
				color: #ccc;
			}
		}

		.btnsc {
			width: 520rpx;
			height: 96rpx;
			background: linear-gradient(180deg, #FFBE00FF 0%, #FFC200FF 100%);
			border-radius: 48rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			position: relative;
			top: 30px;
			left: 50%;
			transform: translateX(-50%);
			color: #FFFFFF;
		}

	}

	.btn {
		width: 520rpx;
		height: 96rpx;
		background: linear-gradient(180deg, #FFBE00FF 0%, #FFC200FF 100%);
		border-radius: 48rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		color: #FFFFFF;
	}

	.wai {
		width: 90%;
		margin: 50rpx auto;
		color: #070E2F;
		font-size: 25rpx;
	}

	.rectangle {
		width: 90%;
		box-sizing: border-box;
		margin: 30rpx auto;
		background: #FFFFFF;
		border-radius: 30rpx;

		.title {
			padding: 30rpx;
			color: #aaa;
			font-size: 28rpx;
		}

		.money {
			width: 80%;
			margin: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.num {
				display: flex;

				span {
					font-weight: 600;
					font-size: 50rpx;
				}

				input {
					font-weight: 700;
					font-size: 50rpx;
					width: 80%;
					text-indent: 0.5em;
				}
			}

			.all {
				font-size: 26rpx;
				font-weight: 400;
				color: #697BA0;
				width: 200rpx;
			}
		}

		.hou2 {
			color: #aaa;
			font-size: 14px;
			line-height: 50px;
			margin-left: 70rpx;
		}

	}
</style>